<template>
   <div>
        <div class="btns">
		   <el-button type="primary" plain  @click="add">新增走访记录</el-button>
        </div>
        <el-table :data="interviewData.records" stripe>
		   <el-table-column type="expand">
			   <template #default="scope">
				   <el-form label-width="100">
					   <el-form-item label="走访日期">{{scope.row.time}}</el-form-item>
					   <el-form-item label="风险备注" prop="riskRemark">
					     <el-input type="textarea" :rows="4" maxlength="250" v-model="scope.row.riskRemark" readonly></el-input>
					   </el-form-item>
					   <el-form-item label="意见与建议" prop="suggestion">
					     <el-input type="textarea" :rows="4" maxlength="250" v-model="scope.row.suggestion" readonly></el-input>
					   </el-form-item>
					   <el-form-item label="走访详情" prop="detail">
					     <el-input type="textarea" :rows="4" maxlength="250" v-model="scope.row.detail" readonly></el-input>
					   </el-form-item>
				   </el-form>
			   </template>
		   </el-table-column>
		   <el-table-column label="走访日期">
			   <template #default="scope">
				   <el-popover placement="right">
					   <template #reference>
						   <span>{{scope.row.time}}</span>
					   </template>
					   <template #default>
						   <el-image
								style="width: 120px;height: 120px;"
								fit = "contain"
								:src="getPath(scope.row.photo)"></el-image>
					   </template>
				   </el-popover>
			   </template>
		   </el-table-column>
		   <el-table-column label="风险类型" prop="riskType" :show-overflow-tooltip="true" :formatter="formatRiskType"></el-table-column>
		   <el-table-column label="年收入" prop="income"></el-table-column>
		   <el-table-column label="负债" prop="liability"></el-table-column>
		   <el-table-column width="150px">
			   <template #default="scope">
				   <el-button type="primary" plain size="small" :icon="Update" @click="update(scope.row.id)">修改</el-button>
				   <el-button type="danger" plain size="small" @click="del(scope.row.id)">删除</el-button>
			   </template>
		   </el-table-column>
        </el-table>
        <el-dialog v-model="myDialog.show" :title="myDialog.title" :close-on-click-modal="false" width="830px">
        	 <MyAdd v-if="myDialog.show" v-model:show="myDialog.show" :id="myDialog.id" :fId="props.id" @getInterviewData="getInterviewData"/>
        </el-dialog>
   </div>
</template>
  
<script setup>
import url from './util'
import MyAdd from "./add"
import { ref,reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { get, post } from "@/axios";
import { ElMessage } from "element-plus";
import { getPath } from '@/util'
import Update from '@/components/icons/update'
const props = defineProps(['id'])
const myDialog = reactive({
	show: false,
	title: '',
	id: null
})
const interviewData = reactive({
	records: []
})
const formatRiskType = (row, column, cellValue) => {
  if (!cellValue) return ''; // 如果没有值，返回空字符串

  // 定义风险类型的映射
  const riskTypeMap = {
    '1': '人力风险',
    '2': '物力风险',
    '3': '自然风险',
    '4': '金融风险',
    '5': '社会风险'
  };

  // 将逗号分隔的编码转换为名称
  return cellValue.split(',').map(code => riskTypeMap[code]).join('，');
};
function add () {
	myDialog.show = true
	myDialog.title = "新增走访记录"
	myDialog.id = null
}
function update(id) {
	myDialog.show = true
	myDialog.title = "修改走访记录"
	myDialog.id = id
}
function del(id) {
	ElMessageBox.confirm("一旦删除无法恢复，您确定要删除该走访记录吗？",'警告',{
		type: 'warning'
	}).then(() => {
		post(url.del,{id},content => {
			getInterviewData ()
		})
	}).catch(() => {})
}

function getInterviewData () {
	get(url.list,{ fId:props.id },content => {
		console.dir(content)
		interviewData.records = content
		console.dir(poorData.records)
	})
}
getInterviewData()

</script>
  
<style scoped lang="scss">


</style>